<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{info}}</h1>
        <button @click="upper">将其转换为大写</button>
        <div v-upper="info"></div>
        <h1 v-upper="msg"></h1>
        <!-- <h1 v-upper></h1> -->
        <div v-lower="lowTest"></div>

        <input type="text" v-focus>
        <h1 v-yangyang="msg"></h1>
    </div>
    <div class="box2">
        <!-- <h1 v-upper="msg"></h1> -->
        <h1 v-yangyang="msg"></h1>
    </div>
    <script>
        // 全局自定义指令
        Vue.directive('yangyang',{
            inserted(el,binding,vnode){
                el.innerText = binding.value.toUpperCase();
            }
        })



        // 需求：将msg变为大写  必须使用指令完成
        /* 
        自定义指令：分为两类，一类称为全局自定义指令 一类称为局部自定义指令
        
        */
        let vm = new Vue({
            el:'.box',
            data:{
                info:'zihaozhongwumeishuijiao',
                msg:'yangyangyangyang',
                lowTest:'OIGERJGOIEJRIG'
            },
            methods: {
                upper(){
                    this.msg = this.msg.toUpperCase();
                }
            },
            // 局部自定义指令 可以使用bind 也可以inserted
            directives:{
                upper:{
                    bind(el,binding,vnode){
                       /*  console.log(el);//el是指令绑定的元素
                        console.log(binding);
                        console.log(vnode); */
                        el.innerText = binding.value.toUpperCase();
                    }
                },
                lower:{
                    inserted(el,binding,vnode){
                        console.log(el);
                        console.log(binding);
                        console.log(vnode);
                        el.innerText = binding.value.toLowerCase();
                    }
                },
            //需求是页面加载完成让input框指定获取焦点必须要指令完成
                focus:{
                    inserted(el){
                        el.focus();
                    }
                    /* bind(el){
                        el.focus();
                    } */

                }
            
            }

        })
        let vm2 = new Vue({
            el:'.box2',
            data:{
                msg:'yangyangyang'
            }
        })
    </script>
</body>
</html>